<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    import Map from 'ol/Map';
    import View from 'ol/View';
    import GeoJSON from 'ol/format/GeoJSON';
    import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
    import {Vector as VectorSource} from 'ol/source';
    import { Vector as VectorLayer} from 'ol/layer';
    export default {
        name: "GeojsonLayer",
        mounted() {
            //定义各种要素的样式
            const image = new CircleStyle({
                radius: 5,
                fill: null,
                stroke: new Stroke({
                    color: 'red',
                    width: 1}),
            });

            const styles = {
                'Point': new Style({
                    image: image,
                }),
                'LineString': new Style({
                    stroke: new Stroke({
                        color: 'green',
                        width: 1,
                    }),
                }),
                'MultiLineString': new Style({
                    stroke: new Stroke({
                        color: 'green',
                        width: 1,
                    }),
                }),
                'MultiPoint': new Style({
                    image: image,
                }),
                'MultiPolygon': new Style({
                    stroke: new Stroke({
                        color: 'yellow',
                        width: 1,
                    }),
                    fill: new Fill({
                        color: 'rgba(255, 255, 0, 0.1)',
                    }),
                }),
                'Polygon': new Style({
                    stroke: new Stroke({
                        color: 'blue',
                        lineDash: [4],
                        width: 3,
                    }),
                    fill: new Fill({
                        color: 'rgba(0, 0, 255, 0.1)',
                    }),
                }),
                'GeometryCollection': new Style({
                    stroke: new Stroke({
                        color: 'magenta',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'magenta',
                    }),
                    image: new CircleStyle({
                        radius: 10,
                        fill: null,
                        stroke: new Stroke({
                            color: 'magenta',
                        }),
                    }),
                }),
                'Circle': new Style({
                    stroke: new Stroke({
                        color: 'red',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'rgba(255,0,0,0.2)',
                    }),
                }),
            };

            const styleFunction = function (feature) {
                return styles[feature.getGeometry().getType()];
            };

            this.map = new Map({
                layers: [
                    //geojson是矢量数据，需要使用矢量图层去渲染矢量数据源
                    new VectorLayer({
                        imageRatio: 2,
                        source: new VectorSource({//geojson是矢量数据需要使用矢量数据源去加载
                            url: 'http://localhost:8888/openlayer/geojson/hubei.geojson',
                            format: new GeoJSON(),//指定矢量数据的格式
                        }),
                        style: styleFunction,
                    }),
                ],
                target: 'map',
                view: new View({
                    center: [ 116.38916015624999, 39.926588421909436],
                    projection: "EPSG:4326", //指定投影
                    zoom: 4,
                }),
            });
        },
    }
</script>

<style scoped>

</style>